<template>
  <div class="menu-container">
    <div class="menu-top">
      <div class="avatar-container">
        <avatar :email="userStore.email" :avatar="userStore.avatar"></avatar>
      </div>

      <ul class="menu-content no-drag">
        <li @click="handleChangeMenu(1)">
          <span class="iconfont icon-chat" v-if="menuStore.currentMenuIndex !== 1" style="font-size: 20px"></span>
          <span class="iconfont icon-chat2"  v-else style="font-size: 26px;color: rgb(7, 183, 91)"></span>

        </li>


        <el-badge :value="menuStore.noticeNumber.contact" :offset="[-10 , 0]" class="item" :show-zero="false"  :max="99">
        <li @click="handleChangeMenu(2 )">
          <span class="iconfont icon-lianxiren" v-if="menuStore.currentMenuIndex !== 2" style="font-size: 24px"></span>
          <span class="iconfont icon-lianxiren2"  v-else style="font-size: 24px;color: rgb(7, 183, 91)"></span>
        </li>
        </el-badge>

        <li @click="handleChangeMenu(3)">
          <span class="iconfont icon-shoucang" v-if="menuStore.currentMenuIndex !== 3"  style="font-size: 25px;color: #666666"></span>
          <span class="iconfont icon-shoucang2" v-else  style="font-size: 25px;color: rgb(7, 183, 91)"></span>

        </li>


        <li>
          <span class="iconfont icon-pengyouquan" style="font-size: 20px;color: #666666"></span>
        </li>

        <li>
          <span class="iconfont icon-shipinhao" style="font-size: 25px;color: #666666"></span>
        </li>


        <li>
          <span class="iconfont icon-souyisou" style="font-size: 24px;color: #666666"></span>
        </li>


        <li>
          <span class="iconfont icon-xiaochengxu" style="font-size: 20px;color: #666666"></span>
        </li>
      </ul>
    </div>


    <ul class="menu-footer no-drag">
      <li>
        <el-icon style="font-size: 22px"><Cellphone /></el-icon>
      </li>

        <el-popover
          placement="right"
          trigger="click"
          offset="0"
          style="border-radius: 10px"
        >
          <template #reference>
            <li>
            <span class="iconfont icon-shezhi" style="font-size: 24px;color: #666666"></span>
            </li>
          </template>

          <ul style="width: auto;color: black;"  class="setting-container no-drag">
            <li @click="handleSetting(item.value)" style="font-size: 15px;padding: 8px;width: 125px;border-radius: 5px" class="setting-li" v-for="item in settingList">
              <span> {{item.name}}</span>
            </li>
          </ul>
        </el-popover>


    </ul>

  </div>
</template>
<script setup>
import avatar from '@/components/chat/chatAvatar/index.vue'

import { Cellphone } from '@element-plus/icons-vue'
import { nextTick, onMounted, ref, watch } from 'vue'
import { useMenuStore } from '@/stores/menu'
import { useRouter } from 'vue-router'
import {useUserStore} from '@/stores/user'

const userStore = useUserStore()

const menuStore = useMenuStore()
const router = useRouter()

const settingList = ref([
  { value: 'chatFile' , name: '聊天文件' },
  { value: 'chatRecordManager' , name: '聊天记录管理' },
  { value: 'lock' , name: '锁定' },
  { value: 'faceBack' , name: '反馈' },
  { value: 'setting' , name: '设置' },
])


// 点击设置的菜单时
const handleSetting = (value) => {
  if (value === 'setting') {

    window.ipcRenderer.send('open-new-window' , '/setting', { width : 550 , height: 680})
  }
}


// 切换目录时
const handleChangeMenu = (index) => {
  menuStore.currentMenuIndex = index
  switch (index) {
    case 1: router.push('/chat'); break;
    case 2: router.push('/contact');
      menuStore.noticeNumber.contact = 0
    break;
    case 3: router.push('/collection'); break;
  }

}

</script>



<style scoped lang="less">



.menu-container {
  background-color: rgb(237, 237, 237);
  width: 60px;
  height: 100%;
  border-right: 1px solid rgb(220, 220, 220);
  box-sizing: border-box;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .menu-top {
    .avatar-container {
      width: 100%;
      .avatar {
        border-radius: 5px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin-bottom: 10px;
      }

      margin-bottom: 20px;
    }

    .menu-content {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: 1fr;
      grid-row-gap: 8.5px;
      justify-items: center;
      z-index: 1;

      li {
        cursor: pointer;
        width: 40px;
        border-radius: 5px;
        padding: 5px;
        transition: background-color 0.2s;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      li:hover {
        background-color: rgb(225, 225, 225);

      }
    }
  }


  .menu-footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 8.5px;
    li {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      cursor: pointer;
    }
    li:hover {
      background-color: rgb(225, 225, 225);
    }


    .setting-container{

      .setting-li {
        background-color: rgb(7, 193, 96);
        font-size: 20px;
      }

      .setting-li:hover {
        background-color: rgb(7, 193, 96);
      }
    }
  }

}


</style>
